<template>
  <div>
    <headNav title="学生管理"></headNav>
    <div style="position: relative;" >
      <div class="headBackground" ></div>
      <!-- 头部统计环形块 -->
      <div class="flexCenter statisticsCss" >
        <!-- {{ (statisticsData.orderPayedRate * 100).toFixed(0) }}% -->
        <!-- {{ (statisticsData.parentBindRate * 100).toFixed(0) }}% -->
        <span class="percentageCss" v-if="statisticsData"
        :class="{letf0:(statisticsData.orderPayedRate * 100).toFixed(0) == 100, letf2:(statisticsData.orderPayedRate * 100).toFixed(0) < 10  }" >
          {{ (statisticsData.orderPayedRate * 100).toFixed(0) }}%
        </span>
        <span class="percentageCss" style="left: 4.36rem;" v-if="statisticsData"
        :class="{letf1:(statisticsData.parentBindRate * 100).toFixed(0) == 100, letf3:(statisticsData.parentBindRate * 100).toFixed(0) < 10  }" >
          {{ (statisticsData.parentBindRate * 100).toFixed(0) }}% 
        </span>
        <div id="openingRate" class="echartsCss" ></div>
        <div id="bindingRate" class="echartsCss" ></div>
        <span class="titleCss" >功能开通率</span>
        <span class="titleCss" style="left: 3.9rem; " >绑定家长率</span>
      </div>
      <!-- 底部列表块 -->
      <div class="bottomCss" >
        <div>
          <div class="flexAlign" style="width: 100%; height: 1.3rem; " >
            <input type="text" v-model="inputVal" placeholder="学生姓名查询" class="inputCss" />
            <div class="buttonQuery" @click="queryClick" >查询</div>
          </div>
          <span style="color: #999999; margin-left: 0.3rem; " >注：当前仅显示在籍学生</span>
          <div class="flex" style="width: 6.8rem; height: 0.8rem;"  >
            <div class="flexCenter stateCss" v-for="(val, index) in titleText" :key="index" @click="sieveClick(val.id)" >
              <span v-if="sieveNum != val.id" >{{val.name}}</span>
              <span v-else style="color: #128FEF" >{{val.name}}</span>
              <!-- <span v-if="val.id != 1" >▲</span> -->
              <span v-if="val.id != 1 && sieveNum != val.id" >▼</span>
              <span v-if="val.id != 1 && sieveNum == val.id" style="color:#128FEF" >▼</span>
            </div>
            <div class="flexCenter" style="width: 1rem; height: 0.8rem; " >
              <span>操作</span>
            </div>
          </div>
        </div>

        <div style="width: 6.8rem; height: 5.5rem; overflow-y: auto; " >
          <div class="flex" style="width: 6.8rem; height: 0.8rem;"
          v-for="(val, index) in informationList" :key="index"  >
            <div class="flexCenter stateCss" >
              {{val.studentName}}
            </div>
            <div class="flexCenter stateCss" >

              <button type="default" class="buttonCss" :class="{buttonCss2: val.orderPayed == false}" >
                <span v-if="val.orderPayed == true" >已开通</span>
                <span v-if="val.orderPayed == false" >未开通</span>
              </button>
            </div>
            <div class="flexCenter stateCss" >
              <button type="default" class="buttonCss" :class="{buttonCss2: val.parentBind == false}" >
                <span v-if="val.parentBind == true" >已绑定</span>
                <span v-if="val.parentBind == false" >未绑定</span>
              </button>
            </div>
            <div class="flexCenter stateCss" >
              <button type="default" class="buttonCss" :class="{buttonCss2: val.faceImageUploaded == false}" >
                <span v-if="val.faceImageUploaded == true" >已采集</span>
                <span v-if="val.faceImageUploaded == false" >未采集</span>
              </button>
            </div>
            <div class="flexCenter arrowCss" @click="arrowClick(val)" >
              <span>></span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getStatisticsApi } from '@/api/studentDetailsApi.js'
import echarts from 'echarts'
import { XButton } from 'vux'
export default {
  components: {
    headNav,
    XButton
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      classId: state => state.user.classId,
      classList: state => state.user.classList
    })
  },
  data () {
    return {
      num: false,
      sieveNum: 0,   // 根据字段筛选
      allStudents: '',   //  全部学生信息数组
      informationList: '',   // 学生信息数组 （筛选后）
      statisticsData: '',   // 统计表
      inputVal: '',
      titleText: [
        {id: 1, name: '学生姓名'},
        {id: 2, name: '功能套餐'},
        {id: 3, name: '绑定家长'},
        {id: 4, name: '人像采集'},
      ]
    }
  },
  async mounted() {
    let _this = this
    for (let i of this.classList) {
      if (i.ClassId == this.classId && !i.IsMain) {
        this.$vux.alert.show({
          title: '提示',
          content: '您不是该班班主任，无法进行操作',
          onHide  () {
            // _this.$router.push('/menu/index')
            _this.$router.go(-1)
          },
        })
      }
    }
    this.statisticsPretend()
  },
  methods: {
    // 排序事件
    sieveClick (e) {
      if (e == 1) {
        return
      }


      if (this.sieveNum == e) {
        if (this.num == true) {
          this.informationList.sort(this.compare)
          this.num = false
          return
        } else {
          this.informationList.sort(this.compareTwo)
          this.num = true
          return
        }
      } else {
        this.sieveNum = e
        this.informationList.sort(this.compare)
        this.num = false
      }


    },
    // 操作按钮点击事件
    arrowClick (e) {
      this.$router.push('details')
      localStorage.detailsId = JSON.stringify(e)
      console.log(e)
    },
    // 查询按钮触发事件
    queryClick () {
      this.sieveNum = 0
      if (this.inputVal == '') {
        this.statisticsPretend()
        return
      }

      this.informationList = this.allStudents
      let arr = []
      for (let val of this.informationList) {
        if (val.studentName.indexOf(this.inputVal) != -1) {
          arr.push(val)
        }
      }
      this.informationList = arr
    },
    // 获取统计表封装
    async statisticsPretend () {
      let res = await getStatisticsApi(this.classId)
      this.statisticsData = res.data
      this.informationList = res.data.students
      this.allStudents = res.data.students
       // 功能开通率
       this.drawPie('openingRate', this.statisticsData.orderPayedRate)
       // 绑定家长率
       this.drawPie('bindingRate', this.statisticsData.parentBindRate)
    },
    // echarts 图表处理封装
    drawPie(id, num){
       this.charts = echarts.init(document.getElementById(id))
       this.charts.setOption({
          // tooltip: {
          //        trigger: 'item',
          //        formatter: '{a} <br/>{b}: {c} ({d}%)'
          //    },
             legend: {
                 orient: 'vertical',
                 left: 10,
             },
             series: [
                 {
                 name: '占比',
                 type: 'pie',
                 radius: ['55%', '70%'],
                 color: ['#e0e0e0', '#128fef'],
                 avoidLabelOverlap: false,
                 label: {
                     show: false,
                     position: 'center'
                 },
                 emphasis: {
                     label: {
                         show: true,
                         fontSize: '30',
                         fontWeight: 'bold'
                     }
                 },
                 labelLine: {
                     show: false
                 },
                 data: [
                     {value: 100 - num*100, name: ''},
                     {value: num*100, name: ''}
                 ]
             }
         ]
       })
    },
    // 筛选正序倒序封装方法
    compare (x, y) {
      // this.informationList = this.allStudents
      if (this.sieveNum == 2) {
        if (x.orderPayed < y.orderPayed) {
            return 1;
        } else if (x.orderPayed > y.orderPayed) {
            return -1;
        } else {
            return 0;
        }
      }

      if (this.sieveNum == 3) {
        if (x.parentBind < y.parentBind) {
            return 1;
        } else if (x.parentBind > y.parentBind) {
            return -1;
        } else {
            return 0;
        }
      }

      if (this.sieveNum == 4) {
        if (x.faceImageUploaded < y.faceImageUploaded) {
            return 1;
        } else if (x.faceImageUploaded > y.faceImageUploaded) {
            return -1;
        } else {
            return 0;
        }
      }
    },
    compareTwo (x, y) {
      // this.informationList = this.allStudents
      if (this.sieveNum == 2) {
        if (x.orderPayed < y.orderPayed) {
            return -1;
        } else if (x.orderPayed > y.orderPayed) {
            return 1;
        } else {
            return 0;
        }
      }

      if (this.sieveNum == 3) {
        if (x.parentBind < y.parentBind) {
            return -1;
        } else if (x.parentBind > y.parentBind) {
            return 1;
        } else {
            return 0;
        }
      }

      if (this.sieveNum == 4) {
        if (x.faceImageUploaded < y.faceImageUploaded) {
            return -1;
        } else if (x.faceImageUploaded > y.faceImageUploaded) {
            return 1;
        } else {
            return 0;
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.arrowCss {
  width: 1rem;
  height: 0.8rem;
  font-size: 0.4rem;
}

.buttonQuery {
  width: 1rem;
  height: 0.5rem;
  background: #0085DE;
  color: #FFF;
  border-radius: 0.5rem;
  border: 0;
  font-size: 0.23rem;
  .flexCenter;
}

.stateCss {
  width: 1.5rem;
  height: 0.8rem;
}

.buttonCss {
  width: 1.2rem;
  height: 0.6rem;
  color: #128FEF;
  background: #EAF3F9;
  border: 0px;
  border-radius: 0.1rem;
  font-size: 0.22rem;
}

.buttonCss2 {
  width: 1.2rem;
  height: 0.6rem;
  color: #FF3000;
  background: #FFEEEE;
  border: 0px;
  border-radius: 0.1rem;
  font-size: 0.22rem;
}

.bottomCss {
  width: 6.8rem;
  height: 8rem;
  background: #FFF;
  margin: 1.5rem 0 0 0.2rem;
  border-radius: 0.15rem;
}

.inputCss {
  width: 3rem;
  height: 0.6rem;
  border: 1px solid #f1f1f1;
  border-radius: 0.6rem;
  background: #f1f1f1;
  margin-left: 0.2rem;
  margin-right: 0.3rem;
  padding-left: 0.2rem;
  font-size: 0.25rem;
  color: #999999;
}

.titleCss {
  position: absolute;
  top: 2.05rem;
  left: 1.1rem;
  font-size: 0.35rem;
}

.percentageCss {
  position: absolute;
  top: 0.8rem;
  left: 1.7rem;
}

.letf0 {
  left: 1.6rem!important;
}

.letf1 {
  left: 4.3rem!important;
}

.letf2 {
  left: 1.8rem!important;
}

.letf3 {
  left: 4.5rem!important;
}
.echartsCss {
  width: 40%;
  height: 90%;
  margin-top: -0.5rem;
}

.statisticsCss {
  width: 6.8rem;
  height: 2.62rem;
  border-radius: 0.2rem;
  position: absolute;
  top: 0;
  left: 0.2rem;
  background: #FFF;
  // font-size: 25px;
  font-size: 0.38rem;
}

.headBackground {
 width: 100%;
 height: 1.5rem;
 background: #128fef;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexColumn {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
